import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:wallpaper/api/mobile.dart';
import 'package:wallpaper/components/avatar.dart';
import 'package:wallpaper/model/options_base.dart';

class CategoryPage extends StatefulWidget {
  const CategoryPage({super.key});

  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage>
    with AutomaticKeepAliveClientMixin {
  List categoryList = [];

  void getCategory() async {
    Response res = await mobileCategory();
    if (res.data == null || res.data['msg'] != 'success' || !mounted) return;
    setState(() {
      categoryList = res.data['res']['category'];
    });
  }

  //初始化
  @override
  void initState() {
    getCategory();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 40,
        elevation: 0,
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
        surfaceTintColor: Theme.of(context).colorScheme.primaryContainer,
        title: Row(
          children: [
            Avatar(),
            const SizedBox(width: 10),
            const Text(
              '手机壁纸',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            )
          ],
        ),
      ),
      body: Padding(
        padding: EdgeInsets.all(OptionsBase().padding),
        child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: OptionsBase().typeColumns(context),
              crossAxisSpacing: OptionsBase().padding,
              mainAxisSpacing: OptionsBase().padding,
              childAspectRatio: 1.5,
            ),
            itemCount: categoryList.length,
            itemBuilder: (context, index) {
              return GestureDetector(
                onTap: () {
                  Navigator.pushNamed(
                    context,
                    '/mobile',
                    arguments: {
                      'id': categoryList[index]['id'],
                      'title': categoryList[index]['rname']
                    },
                  );
                },
                child: Container(
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Theme.of(context).colorScheme.surface,
                    borderRadius: BorderRadius.circular(5),
                    // 阴影
                    boxShadow: [
                      BoxShadow(
                        color: Theme.of(context).colorScheme.shadow,
                        offset: Offset(1, 2),
                        blurRadius: 2,
                      ),
                    ],
                    image: DecorationImage(
                        image: NetworkImage(categoryList[index]['cover']),
                        fit: BoxFit.cover),
                  ),
                  child: Text(
                    categoryList[index]['rname'],
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                  ),
                ),
              );
            }),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
